<html>
	<head>
		<title>Shion: Web Control</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<meta name="viewport" content="width=320, user-scalable=no" />
		
		<script type="text/javascript">
			var xmlHttp = null;

			function ok ()
			{
			
			}
	
			function toggle (address)
			{
				var img = document.getElementById(address);

				var url = "cgi-bin/interface.cgi?do=upload_instruction&address=" + address + "&action=";
				
				if (img.src.indexOf ("/inactive.png") != -1)
				{
					document.getElementById(address).src = 'run.png';
					
					var toggleHttp = new XMLHttpRequest ();
					toggleHttp.onreadystatechange = ok;
					toggleHttp.open ("GET", url + "on", true);
					toggleHttp.send (null);
				}
				if (img.src.indexOf ("/active.png") != -1)
				{
					document.getElementById(address).src = 'run.png';

					var toggleHttp = new XMLHttpRequest ();
					toggleHttp.onreadystatechange = ok;
					toggleHttp.open ("GET", url + "off", true);
					toggleHttp.send (null);
				}
				
				poll ();
			}
			
			function buildTable (devices)
			{
				var html = "<tr><td colspan=\"2\"><b>Shion: My Devices</b></td></tr>";

				for (var i = 0; i < devices.length; i++)
				{
					var device = devices[i].attributes;

					html += "<tr>" +
								"<td>" + device.getNamedItem("name").value + "</td>" +
								"<td class='icon'><a href='#' onClick='toggle (\"" + device.getNamedItem("address").value + "\")'>" +
								"<img id='" + device.getNamedItem('address').value + "' src='run.png' />" +
								"</a></td>" +
								"</tr>";
				}

				html += "<tr>" +
							"<td class=\"toolbar-left\"><a href=\"help.html\"><img src=\"help.png\" /></a> " +
							"<a href=\"http://shion.aetherial.net\" target=\"_blank\"><img src=\"home.png\" /></a> " +
							"<a href=\"mailto:shion@aetherial.net?subject=Bug%20Report\" ><img src=\"email.png\" /></a>" +
							"</td><td class=\"toolbar\"> </a> </td></tr>";

				document.getElementById ("deviceTable").innerHTML = html;			
			}
			
			function onResponse ()
			{
				// if xmlhttp shows "loaded"
				if (xmlHttp.readyState==4)
				{
					if (xmlHttp.status == 200)
					{
						var response = xmlHttp.responseXML.documentElement;

						devices = response.getElementsByTagName ("device");

						buildTable (devices);

						for (var i = 0; i< devices.length; i++)
						{
							var device = devices[i].attributes;

							if (device.getNamedItem('pending').value == "true")						
								document.getElementById(device.getNamedItem('address').value).src = 'run.png';
							else if (device.getNamedItem('status').value == "Inactive")						
								document.getElementById(device.getNamedItem('address').value).src = 'inactive.png';
							else if (device.getNamedItem('status').value == "Active")							
								document.getElementById(device.getNamedItem('address').value).src = 'active.png';
						}
					}
					else
						alert("Problem retrieving XML data");

					setTimeout ('poll ()', 5000);
				}
			}
			
			function poll ()
			{
				xmlHttp = new XMLHttpRequest ();
				xmlHttp.onreadystatechange = onResponse;
				xmlHttp.open ("GET","cgi-bin/interface.cgi?do=fetch_status",true);
				xmlHttp.send (null);
			}
			
			// setInterval("poll()", 5000);
		</script>
	</head>
	<body onLoad="poll ();">
		<center>
			<table cellspacing="0" id="deviceTable" />
		</center>
	</body>
</html>